<template>
  <el-container style="padding: 15px">
    <el-header>
      <el-form size="small" label-width="0px">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="4">
            <el-form-item>
              <el-button type="info" @click="uploadReportListHandler">上传</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <el-form ref="initReportAddForm" size="small" label-width="80px" :model="initReportObj" :rules="initReportFormRule">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6">
            <el-form-item label="报告类型" prop="reportType" label-width="100px">
              <el-select v-model="initReportObj.reportType" placeholder="请选择报告类型" style="width: 100%">
                <el-option v-for="item in propertyType" :key="item.id" :value="item.id" :label="item.reportType" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报告名称" prop="reportName">
              <el-input v-model="initReportObj.reportName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报告文号" prop="reportId">
              <el-input v-model="initReportObj.reportId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目类型" prop="projectType">
              <el-select v-model="initReportObj.projectType" placeholder="请选择项目类型" style="width: 100%">
                <el-option v-for="item in propertyProjectType" :key="item.id" :value="item.id" :label="item.projectTypeName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6">
            <el-form-item label="评估基准日" label-width="85px" prop="valuationDate">
              <el-date-picker
                v-model="initReportObj.valuationDate"
                style="width: 100%"
                type="date"
                value-format="timestamp"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评估目的" prop="purpose">
              <el-select v-model="initReportObj.purpose" placeholder="请选择评估目的" style="width: 100%">
                <el-option v-for="item in assessmentPurpose" :key="item.id" :value="item.id" :label="item.assessmentPurposeName" />
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="评估方法" prop="assessmentMethod">-->
          <!--              <el-select v-model="initReportObj.assessmentMethod" placeholder="请选择评估方法" style="width: 100%">-->
          <!--                <el-option v-for="item in assessmentMethod" :key="item.id" :value="item.id" :label="item.assessmentMethodName" />-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="评估对象" label-width="100px" prop="evaluationObject">
              <el-select v-model="initReportObj.evaluationObject" style="width: 100%">
                <el-option v-for="item in evaluationObject" :key="item.id" :value="item.id" :label="item.evaluationObjectName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评估范围" prop="scope">
              <el-select v-model="initReportObj.scope" placeholder="请选择估价用途" style="width: 100%">
                <el-option v-for="item in scopeAssessment2" :key="item.id" :value="item.id" :label="item.scopeAssessmentName2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6" style="margin: 0 auto">
            <el-form-item>
              <el-button type="primary" :loading="addButtonLoading" @click="addInit">添加</el-button>
              <el-button @click="resetObj">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
    <el-dialog
      title="提示"
      :visible.sync="uploadReportDialogVisible"
      width="30%"
      :before-close="uploadReportDialogCloseHandler"
      destroy-on-close
    >
      <el-upload
        class="upload-demo"
        :action="fileUploadUrl"
        :before-upload="uploadBeforeHandler"
        :on-success="successHandler"
        :on-error="errorHandler"
        :headers="{ Authorization: this.$store.getters.token }"
      >
        <el-button size="small" type="primary" :loading="uploadFileButtonLoading">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls，xlsx文件，且不超过500kb</div>
      </el-upload>
      <el-divider />
      <p>1、获取模版 <el-button type="text" :loading="downloadFileButtonLoading" disabled @click="downloadModeFile">请点这里</el-button> </p>
      <p>2、在涉及有 金额、折扣 等关键字的字段中，只允许填写数字，可保留小数位两位</p>
      <p>3、两位签字估价师不能是同一人</p>
      <p>4、每个字段的总字数不应超过 100 字</p>
      <p>5、如若报告编号相同, 新的报告会覆盖之前的报告</p>
      <p>6、时间格式请严格按照 2021-01-01 该格式填写</p>
    </el-dialog>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { clientReport, downloadMode, reportById } from '@/api/report'
import { addInitProperty, getSearchFormList } from '@/api/property-report'

export default {
  name: 'Property',
  data() {
    return {
      initReportObj: {},
      initReportFormRule: {
        reportType: [
          { required: true, trigger: 'change', message: '该选项为必填项' }
        ],
        projectType: [
          { required: true, trigger: 'change', message: '该选项为必填项' }
        ],
        valuationDate: [
          { required: true, trigger: 'change', message: '该选项为必填项' }
        ],
        purpose: [
          { required: true, trigger: 'change', message: '该选项为必填项' }
        ],
        evaluationObject: [
          { required: true, trigger: 'change', message: '该选项为必填项' }
        ],
        scope: [
          { required: true, trigger: 'change', message: '该选项为必填项' }
        ],
        reportName: [
          { required: true, trigger: 'blur', message: '该选项为必填项' }
        ]
      },
      projectNoPageList: [],
      objectiveNoPageList: [],
      typeNoPageList: [],
      useNoPageList: [],
      propertyType: [],
      propertyProjectType: [],
      assessmentPurpose: [],
      assessmentMethod: [],
      scopeAssessment2: [],
      evaluationObject: [],

      addButtonLoading: false,

      clientReportFormObj: {},
      clientReportDialogVisible: false,
      clientReportSearchList: [],

      uploadReportDialogVisible: false,
      downloadFileButtonLoading: false,
      uploadFileButtonLoading: false,

      reportIdPrefix: 'TZF',

      fileUploadUrl: process.env.VUE_APP_BASE_API + 'property/upload/common'

    }
  },

  computed: {
    ...mapGetters([
      'id'
    ])
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.checkQuery()
      this.getSearchForm()
    },

    getSearchForm() {
      getSearchFormList().then(res => {
        this.propertyType = res.data.propertyType
        this.propertyProjectType = res.data.propertyProjectType
        this.assessmentPurpose = res.data.assessmentPurpose
        this.assessmentMethod = res.data.assessmentMethod
        this.scopeAssessment2 = res.data.scopeAssessment2
        this.evaluationObject = res.data.evaluationObject
      })
    },
    resetObj() {
      this.initReportObj = {}
      // 重置成功提示框
      this.$message({
        showClose: true,
        message: '重置成功',
        type: 'success'
      })
    },

    addInit() {
      this.addButtonLoading = true
      const initReportObj = this.initReportObj
      initReportObj.technician = this.id
      console.log(initReportObj)
      this.$refs.initReportAddForm.validate(valid => {
        if (valid) {
          addInitProperty(initReportObj).then(res => {
            this.resetObj()
            this.$router.push({ path: '/report/detailsProperty', query: { id: res.data.id }})
          }).finally(() => {
            this.addButtonLoading = false
          })
        } else {
          this.$message.warning('请根据表单提示填写')
          this.addButtonLoading = false
        }
      })
    },

    clientReportDialogHandler() {
      this.clientReportDialogVisible = true
    },

    clientReportDialogCloseHandler() {
      this.clientReportDialogVisible = false
      this.clientReportSearchList = []
    },

    client(id) {
      reportById(id).then(res => {
        this.initReportObj = res.data.report
        this.clientReportDialogCloseHandler()
      })
    },

    searchClientList() {
      const clientReportFormObj = this.clientReportFormObj
      clientReport(clientReportFormObj.reportName, clientReportFormObj.reportId).then(res => {
        this.clientReportSearchList.push(res.data.report)
      })
    },

    checkQuery() {
      // 检查query中有没有携带id，如果有说明是从详情页跳转过来
      const id = this.$route.query.id
      if (id) {
        reportById(id).then(res => {
          this.initReportObj = res.data.report
        })
      }
    },

    uploadReportListHandler() {
      this.uploadReportDialogVisible = true
    },

    uploadReportDialogCloseHandler() {
      this.uploadReportDialogVisible = false
    },

    downloadModeFile() {
      this.downloadFileButtonLoading = true
      downloadMode().then(res => {
        const url = window.URL.createObjectURL(new Blob([res], { type: res.type }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '模版.xlsx')
        document.body.appendChild(link)
        link.click()
        this.downloadButtonLoading = false
      }).finally(() => {
        this.downloadFileButtonLoading = false
      })
    },

    uploadBeforeHandler(file) {
      console.log(file)
      const size = file.size / 1000
      this.uploadFileButtonLoading = true
      if (size > 500) {
        this.$message.warning('文件大小必须小于 500kb')
        this.uploadFileButtonLoading = false
        return false
      }
      const type = file.type
      if (type !== 'application/vnd.ms-excel' && type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        this.$message.warning('请注意上传文件的类型')
        this.uploadFileButtonLoading = false
        return false
      }
      return true
    },
    successHandler(response, file, fileList) {
      this.$message.success(response)
      this.uploadFileButtonLoading = false
    },

    errorHandler(err, file, fileList) {
      this.uploadFileButtonLoading = false
      this.$notify.error(err.message)
    }
  }
}
</script>

<style scoped>

</style>
